<template>
    <Navbar/>
    <div>
      <el-card>
        <el-page-header content="费用列表" icon="" title="物业费用记录" />
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="propname" label="名字" width="180" />
          <el-table-column prop="building" label="楼号" />
          <el-table-column prop="roomnumber" label="房号" />
          <el-table-column prop="tmoney" label="总金额" />
          <el-table-column label="收费时间" width="180">
            <template #default="scope">
              {{ formatTime.gettime(scope.row.editTime) }}
            </template>
          </el-table-column>
  
          <el-table-column label="是否缴费">
            <template #default="scope">
              <el-tag v-if="scope.row.ispay === 0" class="ml-2" type="danger">未缴费</el-tag>
              <el-tag v-else class="ml-2" type="success">以缴费</el-tag>
            </template>
          </el-table-column>
  
        </el-table>
      </el-card>
  
    </div>
  </template>
  
  <script setup>
  import Navbar from '@/components/Navbar'
  import { ref, onMounted, reactive } from "vue";
  import axios from "axios";
  import formatTime from "@/util/formatTime.js";
  import { useStore } from 'vuex';

  const store = useStore()
  const tableData = ref([]);

  onMounted(() => {
    getTableData();
  });
  //显示页面数据
  const getTableData = async () => { 
    const building = store.state.webuserInfo.building
    const roomnumber = store.state.webuserInfo.roomnumber
    const temdata = building+roomnumber
    const res = await axios.get(`/webapi/rate/alllist/${temdata}`);
    tableData.value = res.data.data;
  };
  

  </script>
  
  <style lang="scss" scoped>
  .el-table {
    margin-top: 50px;
  }
  </style>
  